<template>
  <div class="login-page">
    <div class="title max-title">
      您好，欢迎来到智慧梁场
      <img
        src="@/assets/login-icon.png"
        class="icon"
      >
    </div>
    <div class="login-form">
      <div class="tit">
        登录
      </div>
      <div class="input user">
        <img
          src="@/assets/icon/user.png"
          class="first"
        >
        <input
          class="text"
          type="text"
          v-model="loginForm.loginname"
          placeholder="请输入用户名"
        >
      </div>
      <div class="input pwd">
        <img
          src="@/assets/icon/lock.png"
          class="first"
        >
        <input
          class="text"
          :type="showPwd ? 'text' : 'password'"
          v-model="loginForm.password"
          placeholder="请输入登陆密码"
          @keypress.enter="handleLogin"
        >
        <div
          class="last"
          @click="showPwd = !showPwd"
        >
          <img
            src="@/assets/icon/eye-open.png"
            v-if="showPwd"
          >
          <img
            src="@/assets/icon/eye-close.png"
            v-else
          >
        </div>
      </div>
      <div
        class="input code"
        v-if="captchaHasEnabled"
      >
        <img
          src="@/assets/icon/lock.png"
          class="first"
        >
        <input
          class="text"
          type="text"
          v-model="loginForm.captchaCode"
          placeholder="验证码"
          @keypress.enter="handleLogin"
        >
        <img
          class="img"
          @click="getCaptcha"
          :src="captchaCodeImg"
        >
      </div>
      <div class="option">
        <van-checkbox v-model="rememberPwd">
          记住密码
        </van-checkbox>
        <!-- <van-checkbox v-model="autoLogin">
          自动登陆
        </van-checkbox> -->
      </div>
      <div
        class="button"
        @click="handleLogin"
      >
        确认登录
      </div>
      <div
        class="forget"
        @click="$router.push('/login/forget')"
      >
        忘记密码？
      </div>
    </div>
    <div class="user-agreement">
      登录即视为已阅读并同意<a @click="$router.push('/login/protocol')">《隐私协议》</a>
    </div>
  </div>
</template>

<script>
import preventBack from 'vue-prevent-browser-back'
import JSencrypt from 'jsencrypt'
import _ from 'lodash'

export default {
  name: "LoginPage",
  mixins: [ preventBack ],
  data() {
    return {
      // 是否显示密码
      showPwd: false,
      // 记住密码
      rememberPwd: false,
      // 自动登陆
      autoLogin: false,
      // rsa公钥
      rsaPublicKey: "",
      // 是否启用验证码
      captchaHasEnabled: false,
      // 验证码图片
      captchaCodeImg: '',
      loginForm: {
        // 梁场应用ID
        appId: "SMARTLC",
        // 通过密码登陆
        type: "password",
        // RSA key
        rsaKey: "",
        // 验证码Key
        captchaKey: "",
        // 用户名
        loginname: "",
        // 密码
        password: "",
        // 验证码
        captchaCode: "",
      },
    };
  },
  created() {
    this.getLogonRsa();
    this.getCaptcha();

    let userinfo = this.libs.store.getItem('remember_pwd')
    if (userinfo) {
      this.rememberPwd = true
      this.loginForm.loginname = userinfo.loginname
      this.loginForm.password = userinfo.password
    }
  },
  methods: {
    // 获取rsa公钥信息
    getLogonRsa() {
      this.api.GET_LOGIN_RSA().then((res) => {
        this.loginForm.rsaKey = res.rsaKey;
        this.rsaPublicKey = res.rsaPublicKey;
      });
    },
    // 获取验证码配置
    getCaptcha() {
      this.api.GET_CAPTCHA().then((res) => {
        this.loginForm.captchaCode = ''
        this.loginForm.captchaKey = res.key   
        this.captchaCodeImg = res.code
        this.captchaHasEnabled = res.captchaHasEnabled
      });
    },
    
    // 发起登陆
    async handleLogin() {
      // 验证用户名
      if (!this.loginForm.loginname) return this.$toast.fail('请输入用户名');
      // 验证码密码
      if (!this.loginForm.password) return this.$toast.fail('请输入密码');
      // 验证码未输入
      if (this.captchaHasEnabled && !this.loginForm.captchaCode) return this.$toast.fail('请输入验证码');

      // 组装登陆参数
      const formParams = _.cloneDeep(this.loginForm)
      const encrypt = new JSencrypt()
      encrypt.setPublicKey(this.rsaPublicKey)
      const newpwd = encrypt.encrypt(this.loginForm.password)
      this.$set(formParams, 'password', newpwd)

      // 展示加载
      this.$toast.loading({  message: '正在登陆...', forbidClick: true });
      let res = await this.api.USER_LOGIN(formParams).catch(() => {
        this.getCaptcha()
      })
      this.$toast.clear()

      // 如果开启了记住密码 把账号密码放入缓存
      if (this.rememberPwd) {
        this.libs.store.setItem('remember_pwd', {
          loginname: this.loginForm.loginname,
          password: this.loginForm.password,
          autoLogin: this.autoLogin
        })
      } else {
        this.libs.store.delItem('remember_pwd')
      }

      // 登陆成功 设置token 跳转首页
      this.libs.store.setItem('token', res)
      this.$router.replace({ name: 'home' })
    }
  },
};
</script>

<style lang="scss" scoped>
@import "./style.scss";
</style>
